<script setup>

const modelValue = defineModel()

const props = defineProps({

  name: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  columns: {
    type: Array,
    default: () => [
      // { text: '杭州', value: 'Hangzhou' },
      // { text: '宁波', value: 'Ningbo' },
      // { text: '温州', value: 'Wenzhou' },
      // { text: '绍兴', value: 'Shaoxing' },
      // { text: '湖州', value: 'Huzhou' },
    ]
  },


})

const displayText = computed(() => {
  const item = props.columns.find(col => col.value === modelValue.value)
  return item ? item.text : ''
})

const showPicker = ref(false)
const attrs = useAttrs()

const emits = defineEmits(['onConfirm'])

const onConfirm = (value) => {
  showPicker.value = false

  let id = value.selectedOptions?.[0].value
  modelValue.value = id

  emits('onConfirm', id)
}
</script>

<template>
  <van-field
    v-bind="attrs"
    v-model="displayText"
    is-link
    readonly
    :name="name"
    :label="label"
    :placeholder="placeholder"
    @click="showPicker = true"
  />

  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
      :columns="columns"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<style scoped>

</style>
